.font {
  font-family: '思源黑体', '微软雅黑', tahoma, sans-serif;
}
.b-b-d {
  border-bottom: dashed 1px #f0f0f0;
}
.page {
  font-family: '思源黑体', '微软雅黑', tahoma, sans-serif;
  flex-grow: 1;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
}
#message {
  font-family: '思源黑体', '微软雅黑', tahoma, sans-serif;
}
#message .message-transition {
  position: fixed;
  left: 50%;
  top: 40%;
  z-index: 999999;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 4px;
  padding: 10px 15px;
  color: white;
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
  transition: opacity .3s ease;
  opacity: 1;
}
#message .message-enter,
#message .message-leave {
  opacity: 0;
}
#modal {
  font-family: '思源黑体', '微软雅黑', tahoma, sans-serif;
}
#modal .modal-shadow-transition {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999997;
  background: rgba(0, 0, 0, 0.3);
  height: 100%;
  width: 100%;
  transition: opacity .3s ease;
  opacity: 1;
}
#modal .modal-dialog-transition {
  position: fixed;
  left: 50%;
  top: 40%;
  z-index: 999998;
  background: white;
  border-radius: 4px;
  padding: 10px 15px;
  color: #111111;
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
  transition: opacity .3s ease;
  opacity: 1;
}
#modal .modal-shadow-enter,
#modal .modal-shadow-leave,
#modal .modal-dialog-enter,
#modal .modal-dialog-leave {
  opacity: 0;
}
.conponent-item-course {
  border-bottom: dashed 1px #f0f0f0;
  padding: 15px 15px 0 15px;
}
.conponent-item-course h3 {
  display: inline-block;
  color: #555555;
  font-size: 18px;
  padding-bottom: 15px;
  cursor: pointer;
}
.conponent-item-course h3::after {
  content: '';
  display: block;
}
.conponent-item-course h3:hover {
  color: #24abb0;
}
.conponent-item-course p {
  font-size: 12px;
  color: #888888;
  padding-bottom: 15px;
}
.conponent-item-course span.tag {
  color: #24abb0;
}
.conponent-item-course span::after {
  content: '·';
  display: inline-block;
  padding: 0 5px;
}
.conponent-item-course span:last-child::after {
  content: '';
  display: none;
}
.conponent-item-homework {
  border-bottom: dashed 1px #f0f0f0;
  padding: 15px 15px 0 15px;
}
.conponent-item-homework h3 {
  display: inline-block;
  color: #555555;
  font-size: 18px;
  padding-bottom: 15px;
  cursor: pointer;
}
.conponent-item-homework h3::after {
  content: '';
  display: block;
}
.conponent-item-homework h3:hover {
  color: #24abb0;
}
.conponent-item-homework p {
  font-size: 12px;
  color: #888888;
  padding-bottom: 15px;
}
.conponent-item-homework span.is-push {
  color: #24abb0;
}
.conponent-item-homework span.not-push {
  color: #ea6e24;
}
.conponent-item-homework span::after {
  content: '·';
  display: inline-block;
  padding: 0 5px;
}
.conponent-item-homework span:last-child::after {
  content: '';
  display: none;
}
.conponent-input {
  text-align: center;
}
.conponent-input label {
  display: flex;
  margin: 10px auto 0 auto;
  width: 250px;
  height: 48px;
  border: solid 1px #eeeeee;
}
.conponent-input label div {
  width: 16px;
  height: 16px;
  margin: 16px;
  background: url("img/spit_input.png") no-repeat;
}
.conponent-input label input {
  font-family: '思源黑体', '微软雅黑', tahoma, sans-serif;
  border: none;
  height: 48px;
  width: 200px;
}
.conponent-input label.focus {
  border: solid 1px #24abb0;
  box-shadow: 0 0 3px 0 #24abb0;
}
.conponent-textarea {
  text-align: center;
}
.conponent-textarea label {
  margin: 10px auto 0 auto;
  padding: 2px 8px;
  display: block;
  border: solid 1px #eeeeee;
}
.conponent-textarea label textarea {
  font-family: '思源黑体', '微软雅黑', tahoma, sans-serif;
  font-size: 12px;
  border: none;
  line-height: 2em;
  width: 100%;
  resize: none;
  overflow: hidden;
}
.conponent-textarea label.focus {
  border: solid 1px #24abb0;
  box-shadow: 0 0 3px 0 #24abb0;
}
#app {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: row;
}
#banner {
  height: 100%;
  display: flex;
  flex-direction: column-reverse;
  background-position: center;
  background-size: cover;
  transition: width 0.3s;
}
#banner > div {
  font-family: '思源黑体', '微软雅黑', tahoma, sans-serif;
  align-items: flex-end;
  color: white;
  padding: 20px;
}
#banner > div > h1 {
  font-size: 30px;
}
#banner > div > h2 {
  font-size: 14px;
}
#banner > div > p {
  font-size: 12px;
  font-weight: lighter;
  line-height: 14px;
  margin-top: 20px;
}
#SideNav {
  width: 50px;
  height: 100%;
  background: #202020;
  z-index: 500;
  display: flex;
  flex-direction: column;
}
#SideNav .icon {
  width: 20px;
  height: 20px;
  padding: 15px;
  cursor: pointer;
  opacity: 0.5;
  transition: all 0.3s;
}
#SideNav .icon:hover {
  opacity: 0.8;
}
#SideNav .icon::after {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background: url(img/spit_side_icon.png) no-repeat;
  background-size: 60px;
}
#SideNav .icon#course::after {
  background-position: 0 0;
}
#SideNav .icon#notice::after {
  background-position: -20px 0;
}
#SideNav .icon#homework::after {
  background-position: -40px 0;
}
#SideNav .icon.active {
  opacity: 1;
  background: #24abb0;
}
#SideNav .placeholder {
  flex-grow: 1;
}
#SideNav .log-out {
  width: 20px;
  height: 20px;
  padding: 15px;
  cursor: pointer;
  opacity: 0.5;
  transition: all 0.3s;
}
#SideNav .log-out::after {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background: url(img/ic_log_out.png) no-repeat;
}
#SideNav .log-out:hover {
  opacity: 0.8;
}
#homeworkList h1::before {
  content: '';
  display: inline-block;
  vertical-align: bottom;
  margin: 5px;
  width: 20px;
  height: 20px;
  background: url(img/spit_side_icon_black.png) no-repeat -40px 0;
  background-size: 60px;
  opacity: 0.5;
}
#courseList h1::before {
  content: '';
  display: inline-block;
  vertical-align: bottom;
  margin: 5px;
  width: 20px;
  height: 20px;
  background: url(img/spit_side_icon_black.png) no-repeat 0 0;
  background-size: 60px;
  opacity: 0.5;
}
#homeworkList,
#courseList {
  font-family: '思源黑体', '微软雅黑', tahoma, sans-serif;
  flex-grow: 1;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
}
#homeworkList .title,
#courseList .title {
  padding: 10px;
  margin: 20px;
  border-bottom: dashed 1px #f0f0f0;
  display: flex;
  flex-direction: row;
}
#homeworkList .title .placeholder,
#courseList .title .placeholder {
  flex-grow: 1;
}
#homeworkList .title h1,
#courseList .title h1 {
  font-size: 20px;
  color: #111111;
}
#homeworkList .title .rank,
#courseList .title .rank {
  color: #111111;
}
#homeworkList .title span,
#courseList .title span {
  transition: color 0.3s;
  cursor: pointer;
  color: #888888;
}
#homeworkList .title span:hover,
#courseList .title span:hover {
  color: #24bfc4;
}
#homeworkList .title span.active,
#courseList .title span.active {
  color: #24abb0;
}
#homeworkList .title span::before,
#courseList .title span::before {
  content: '·';
  padding: 4px 8px;
  color: #555555;
}
#homeworkList ul,
#courseList ul {
  margin: 0 20px;
}
#courseDetail {
  font-family: '思源黑体', '微软雅黑', tahoma, sans-serif;
  flex-grow: 1;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  background: #fafafa;
}
#courseDetail .float {
  position: fixed;
  right: 40px;
  top: 20px;
  padding: 8px;
  font-size: 12px;
  color: #888888;
  border-bottom: dashed 1px #f0f0f0;
}
#courseDetail .fixed-top-bar-transition {
  line-height: 70px;
  padding: 0 15px;
  vertical-align: bottom;
}
#courseDetail .fixed-top-bar-transition > div {
  max-width: 800px;
  margin: auto;
}
#courseDetail .fixed-top-bar-transition > div h3 {
  color: #555555;
  font-size: 18px;
  display: inline-block;
}
#courseDetail .fixed-top-bar-transition > div p {
  display: inline-block;
  font-size: 12px;
  color: #888888;
}
#courseDetail .fixed-top-bar-transition > div span.tag {
  color: #24abb0;
}
#courseDetail .fixed-top-bar-transition > div span::after {
  content: '·';
  display: inline-block;
  padding: 0 5px;
}
#courseDetail .fixed-top-bar-transition > div span:last-child::after {
  content: '';
  display: none;
}
#courseDetail .body {
  padding: 15px;
  background: white;
  max-width: 800px;
  margin: auto;
}
#courseDetail .body .title {
  padding-bottom: 15px;
  border-bottom: dashed 1px #f0f0f0;
}
#courseDetail .body .title h3 {
  color: #555555;
  font-size: 18px;
  padding-bottom: 15px;
}
#courseDetail .body .title p {
  font-size: 12px;
  color: #888888;
  padding-bottom: 15px;
}
#courseDetail .body .title span.tag {
  color: #24abb0;
}
#courseDetail .body .title span::after {
  content: '·';
  display: inline-block;
  padding: 0 5px;
}
#courseDetail .body .title span:last-child::after {
  content: '';
  display: none;
}
#courseDetail .body .content {
  text-align: center;
}
#courseDetail .body .content .article {
  margin: 30px 0;
  text-align: left;
}
#courseDetail .body .content .article p {
  min-height: 1em;
}
#courseDetail .body .content img {
  display: block;
  margin: 20px auto 20px auto;
  max-width: 100%;
}
#courseDetail .body .content .attachments {
  text-align: left;
}
#courseDetail .body .content .attachments h2 {
  padding-bottom: 10px;
}
#courseDetail .body .content .attachments h2::before {
  content: '';
  display: block;
  margin-bottom: 10px;
  border-bottom: dashed 1px #f0f0f0;
}
#courseDetail .body .content .attachments div {
  padding-left: 16px;
}
#courseDetail .body .content .attachments div a {
  display: inline-block;
  font-size: 12px;
  line-height: 20px;
  color: #555555;
}
#courseDetail .body .content .attachments div a:visited {
  color: #555555;
}
#courseDetail .body .content .attachments div a:hover {
  color: #24abb0;
}
#courseDetail .body .content .attachments div a::before {
  content: '';
  display: block;
  float: left;
  width: 16px;
  height: 16px;
  margin: 2px;
  background: url("img/spit_input.png") no-repeat -96px -16px;
}
#homeworkDetail {
  font-family: '思源黑体', '微软雅黑', tahoma, sans-serif;
  flex-grow: 1;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  background: #fafafa;
}
#homeworkDetail .float {
  position: fixed;
  right: 40px;
  top: 20px;
  padding: 8px;
  font-size: 12px;
  color: #888888;
  border-bottom: dashed 1px #f0f0f0;
}
#homeworkDetail .fixed-top-bar-transition {
  line-height: 70px;
  padding: 0 15px;
  vertical-align: bottom;
}
#homeworkDetail .fixed-top-bar-transition > div {
  max-width: 800px;
  margin: auto;
}
#homeworkDetail .fixed-top-bar-transition > div h3 {
  color: #555555;
  font-size: 18px;
  display: inline-block;
}
#homeworkDetail .fixed-top-bar-transition > div p {
  display: inline-block;
  font-size: 12px;
  color: #888888;
}
#homeworkDetail .fixed-top-bar-transition > div span.tag {
  color: #24abb0;
}
#homeworkDetail .fixed-top-bar-transition > div span::after {
  content: '·';
  display: inline-block;
  padding: 0 5px;
}
#homeworkDetail .fixed-top-bar-transition > div span:last-child::after {
  content: '';
  display: none;
}
#homeworkDetail .body {
  padding: 15px;
  background: white;
  max-width: 800px;
  margin: auto;
}
#homeworkDetail .body .title {
  padding-bottom: 15px;
  border-bottom: dashed 1px #f0f0f0;
}
#homeworkDetail .body .title h3 {
  color: #555555;
  font-size: 18px;
  padding-bottom: 15px;
}
#homeworkDetail .body .title p {
  font-size: 12px;
  color: #888888;
  padding-bottom: 15px;
}
#homeworkDetail .body .title span.tag {
  color: #24abb0;
}
#homeworkDetail .body .title span::after {
  content: '·';
  display: inline-block;
  padding: 0 5px;
}
#homeworkDetail .body .title span:last-child::after {
  content: '';
  display: none;
}
#homeworkDetail .body .title .article {
  margin: 30px 0;
  text-align: left;
}
#homeworkDetail .body .title .article p {
  min-height: 1em;
}
#homeworkDetail .body .content {
  text-align: center;
}
#homeworkDetail .body .content .upload-area {
  border-bottom: dashed 1px #f0f0f0;
  text-align: left;
  padding: 12px;
}
#homeworkDetail .body .content .upload-area button {
  font-family: '思源黑体', '微软雅黑', tahoma, sans-serif;
  cursor: pointer;
  border: none;
  display: block;
  width: 100px;
  height: 30px;
  line-height: 30px;
  color: white;
  background: #24abb0;
  font-size: 14px;
  text-align: center;
}
#homeworkDetail .body .content .upload-area button[type=submit] {
  margin-top: 12px;
}
#homeworkDetail .body .content .upload-area table {
  width: 100%;
}
#homeworkDetail .body .content .upload-area table tr {
  border-top: dashed 1px #f6f6f6;
  height: 40px;
  line-height: 40px;
}
#homeworkDetail .body .content .upload-area table .file-name {
  width: 60%;
}
#homeworkDetail .body .content .upload-area table .file-name > span {
  color: #24abb0;
}
#homeworkDetail .body .content .upload-area table .file-name > span::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  background: url("img/spit_input.png") no-repeat -96px -16px;
}
#homeworkDetail .body .content .upload-area table .file-size {
  width: 20%;
}
#homeworkDetail .body .content .upload-area table .file-delete {
  width: 20%;
  color: red;
  text-decoration: underline;
  cursor: pointer;
}
#homeworkDetail .body .content .upload-area table .file-delete:hover {
  color: #ff6666;
}
#homeworkDetail .body .content .no-push {
  padding: 12px;
}
#homeworkDetail .body .content .record {
  text-align: left;
  background: white;
  margin: 12px;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  padding: 12px;
}
#homeworkDetail .body .content .record h4 {
  font-size: 12px;
  color: #888888;
}
#homeworkDetail .body .content .record .article {
  margin: 12px 0;
}
#homeworkDetail .body .content .record .article p {
  min-height: 1em;
}
#homeworkDetail .body .content .record .file {
  color: #24abb0;
}
#homeworkDetail .body .content .record .file::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  background: url("img/spit_input.png") no-repeat -96px -16px;
}
#homeworkDetail .body .content .record .file > span {
  display: inline-block;
  padding-left: 4px;
  color: #888888;
  font-size: 0.8em;
}
#noticeList h1::before {
  content: '';
  display: inline-block;
  vertical-align: bottom;
  margin: 5px;
  width: 20px;
  height: 20px;
  background: url(img/spit_side_icon_black.png) no-repeat -20px 0;
  background-size: 60px;
  opacity: 0.5;
}
#noticeList {
  background: #fafafa;
  font-family: '思源黑体', '微软雅黑', tahoma, sans-serif;
  flex-grow: 1;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
}
#noticeList .title {
  padding: 10px;
  margin: 20px;
  border-bottom: dashed 1px #f0f0f0;
  display: flex;
  flex-direction: row;
}
#noticeList .title h1 {
  font-size: 20px;
  color: #111111;
}
#noticeList .title .rank {
  color: #111111;
}
#noticeList li {
  display: block;
  background: white;
  margin-bottom: 20px;
  padding: 20px;
}
#noticeList li h2 {
  font-size: 20px;
  border-bottom: dashed 1px #f0f0f0;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
#noticeList li p {
  font-size: 12px;
  min-height: 1.2em;
  color: #888888;
}
#login,
#verify {
  font-family: '思源黑体', '微软雅黑', tahoma, sans-serif;
  flex-grow: 1;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  background: white;
}
#login .top div,
#verify .top div {
  background: url("img/title.png") no-repeat center 100%;
  width: 200px;
  height: 50px;
  margin: 120px auto 0 auto;
}
#login .top h2,
#verify .top h2 {
  text-align: center;
  padding-top: 8px;
  font-weight: lighter;
  font-size: 18px;
  color: #24abb0;
}
#login .middle,
#verify .middle {
  padding-top: 20px;
  text-align: center;
}
#login .middle .tab-bar,
#verify .middle .tab-bar {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  font-size: 20px;
  color: #888888;
  background: white;
  text-align: center;
  position: relative;
  top: 15px;
  padding: 0 30px;
}
#login .middle .tab-bar span,
#verify .middle .tab-bar span {
  cursor: pointer;
  letter-spacing: 4px;
}
#login .middle .tab-bar span:hover,
#verify .middle .tab-bar span:hover {
  color: #fb8029;
}
#login .middle .tab-bar span.active,
#verify .middle .tab-bar span.active {
  color: #ea6e24;
}
#login .middle .tab-bar b,
#verify .middle .tab-bar b {
  padding: 0 8px;
  font-weight: normal;
}
#login .middle .hr,
#verify .middle .hr {
  max-width: 900px;
  margin: auto;
  padding: 0 40px;
}
#login .middle .hr::before,
#verify .middle .hr::before {
  content: '';
  display: block;
  border-bottom: dashed 1px #f0f0f0;
}
#login .bottom,
#verify .bottom {
  padding-top: 30px;
}
#login .bottom .verify h4,
#verify .bottom .verify h4 {
  text-align: center;
  font-size: 14px;
}
#login .bottom .verify h4 span,
#verify .bottom .verify h4 span {
  color: #ea6e24;
}
#login .bottom button,
#verify .bottom button {
  cursor: pointer;
  font-family: '思源黑体', '微软雅黑', tahoma, sans-serif;
  border: none;
  display: block;
  width: 250px;
  height: 50px;
  line-height: 50px;
  color: white;
  background: #24abb0;
  font-size: 14px;
  text-align: center;
  margin: 10px auto 0 auto;
}
ul {
  margin: 0 20px;
}
